import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { ProBreadcrumb } from '@ant-design/pro-layout';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import styles from './index.less';

export type HeaderContentProps = {
  collapse?: boolean;
  onCollapse?: (collapsed: boolean) => void;
};

const HeaderContent: React.FC<HeaderContentProps> = (props) => {
  const [collapsed, setCollapsed] = useMergedState<boolean>(props.collapse ?? false, {
    value: props.collapse,
    onChange: props.onCollapse,
  });

  return (
    <div className={styles.headerContent}>
      <div
        onClick={() => setCollapsed(!collapsed)}
        style={{
          cursor: 'pointer',
          fontSize: '16px',
          marginRight: '10px',
        }}
      >
        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </div>
      {/* 显示面包屑 */}
      {/* <ProBreadcrumb /> */}
    </div>
  );
};

export default HeaderContent;
